<template>
	<view>
		<view class="top">
			<u-navbar back-text="" back-icon-color="#000000" :border-bottom="false" title-color="#000000" title="信用积分"
			 :background="background"></u-navbar>
			<view class="rule">
				<!-- <view class="view" @click="show_popup=true">
					积分规则 <image src="../static/integral_tb3.png" mode=""></image>
				</view> -->
				<view class="view" @click="toPage('rule')">
					积分规则 <image src="../static/integral_tb3.png" mode=""></image>
				</view>
			</view>
			<view class="plate">
				<image :src="'../static/c'+img+'.png'" class="img"></image>
				<view class="number">
					{{info.credit}}
				</view>
				<view class="text">
					<image :src="img_pre+info.credit_grade_icon" class="icon"></image>
					<text>{{info.credit_grade}}</text>
				</view>
			</view>
			<view class="guard">
				<view class="view">
					<image src="../static/co2.png" mode=""></image> 守约 <text>{{info.credit_count}}</text>次
				</view>
			</view>
		</view>
		<view class="content">
			<view class="up">
				<view class="list" @click="toPage('exchange')" style="margin-right: 23rpx;background-color: #F5F6FA;">
					<image src="../static/e1.png" class="head"></image>
					<view class="con">
						<view class="name">
							恢复信用分
						</view>
						<view class="text">
							金蜜蜜贝皆可恢复
						</view>
					</view>
				</view>
				<view class="list" @click="toPage('detailed')" style="background-color: #FCF1EA;">
					<image src="../static/e2.png" class="head"></image>
					<view class="con">
						<view class="name">
							信用分明细
						</view>
						<view class="text">
							查看信用分明细
						</view>
					</view>
				</view>
			</view>
			<view class="title">
				完善资料
			</view>
			<view class="up">
				<view class="list" @click="toPage('/pages/htmlA/setting/basic')" style="margin-right: 23rpx;">
					<image src="../static/f1.png" class="icon"></image>
					<view class="con">
						<view class="name">
							头像昵称
						</view>
						<view class="text1" v-if="info.give_upload_icon_satus==0">
							<view class="t3">
								点击完善
							</view>
						</view>
						<view class="text1" v-else>
							<view class="t1">
								已完善
							</view>
							<view class="t2">
								+{{info.give_real_name_authentication}}
							</view>
							<view class="t3">
								积分
							</view>
						</view>
					</view>
				</view>
				<view class="list" @click="toPage('/pages/htmlA/setting/collection')">
					<image src="../static/f2.png" class="icon"></image>
					<view class="con">
						<view class="name">
							收款码
						</view>
						<view class="text1" v-if="info.give_collection_pictures_satus==0">
							<view class="t3">
								点击完善
							</view>
						</view>
						<view class="text1" v-else>
							<view class="t1">
								已完善
							</view>
							<view class="t2">
								+{{info.give_collection_pictures}}
							</view>
							<view class="t3">
								积分
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="up">
				<view class="list" @click="toPage('/pages/htmlA/address/index')" style="margin-right: 23rpx;">
					<image src="../static/f3.png" class="icon"></image>
					<view class="con">
						<view class="name">
							收货地址
						</view>
						<view class="text1" v-if="info.give_receiving_address_satus==0">
							<view class="t3">
								点击完善
							</view>
						</view>
						<view class="text1" v-else>
							<view class="t1">
								已完善
							</view>
							<view class="t2">
								+{{info.give_receiving_address}}
							</view>
							<view class="t3">
								积分
							</view>
						</view>
					</view>
				</view>
				<view class="list" @click="toPage('/pages/htmlA/setting/identity','敬请期待')">
					<image src="../static/f4.png" class="icon"></image>
					<view class="con">
						<view class="name">
							实名认证
						</view>
						<view class="text1" v-if="info.give_real_name_authentication_satus==0">
							<view class="t3">
								点击完善
							</view>
						</view>
						<view class="text1" v-else>
							<view class="t1">
								已完善
							</view>
							<view class="t2">
								+{{info.give_upload_icon}}
							</view>
							<view class="t3">
								积分
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="title">
				每日任务
			</view>
			<view class="down">
				<view class="list" @click="guozhong">
					<image src="../static/h1.png" mode=""></image>
					<view class="con">
						<view class="name">
							抢拍蜂巢
						</view>
						<view class="text">
							+{{info.goods_business}}积分
						</view>
					</view>
					<image src="../../../static/image/a6.png" class="icon"></image>
				</view>
				<view class="list" @click="toPage('/pages/htmlC/invitation/poster')">
					<image src="../static/h2.png" mode=""></image>
					<view class="con">
						<view class="name">
							邀请好友
						</view>
						<view class="text">
							+{{info.invitation_successful}}积分
						</view>
					</view>
					<image src="../../../static/image/a6.png" class="icon"></image>
				</view>
				<view class="list" v-if="false" @click="toPage('/pages/htmlG/live/list')">
					<image src="../static/h3.png" mode=""></image>
					<view class="con">
						<view class="name">
							观看直播
						</view>
						<view class="text">
							+1积分
						</view>
					</view>
					<image src="../../../static/image/a6.png" class="icon"></image>
				</view>
				<view class="list" v-if="false">
					<image src="../static/h4.png" mode=""></image>
					<view class="con">
						<view class="name">
							互动任务
						</view>
						<view class="text">
							+1积分
						</view>
					</view>
					<image src="../../../static/image/a6.png" class="icon"></image>
				</view>
			</view>
		</view>
		<u-popup mode="center" :closeable="true" v-model="show_popup" border-radius="10">
			<view class="popup_box">
				<view class="title">信用积分规则</view>
				<view class="title1">
					守约规则
					<view class="title_line"></view>
				</view>
				<view class="popup_con">
					<view class="list1" v-for="(item,index) in list1" :key="index">
						<view class="item1">{{ index+1 }}.{{ item.name }}</view>
						<view class="item2 color1">{{ item.number }}</view>
					</view>
				</view>
				<view class="title1">
					失约规则
					<view class="title_line"></view>
				</view>
				<view class="popup_con">
					<view class="list1" v-for="(item,index) in list2" :key="index">
						<view class="item1">{{ index+1 }}.{{ item.name }}</view>
						<view class="item2 color2">{{ item.number }}</view>
					</view>
				</view>
				<view class="botton" @click="show_popup=false">我知道了</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var than;
	var i = 0;
	export default {
		data() {
			return {
				background: {
					'background': 'transparent'
				},
				show_popup: false,
				list: [],
				list1: [{
						"name": "分享蜂盈蜂巢",
						"number": "+1"
					}, {
						"name": "完成一次兑换",
						"number": "+2"
					},
					{
						"name": "邀请成功",
						"number": "+5"
					}
				],
				list2: [{
						"name": "卖家点击购买未支付",
						"number": "-5"
					}, {
						"name": "卖家虚假支付",
						"number": "-10"
					},
					{
						"name": "催单申诉",
						"number": "-2"
					}, {
						"name": "买家未确认",
						"number": "-5"
					}
				],
				page: 1,
				img: 0,
				info: {}
			}
		},
		onLoad(option) {
			than = this;
		},
		onShow() {
			i = 0;
			than.post("api/credit/index", null, function(data) {
				than.info = data
				console.log(than.info)
				than.start();
			})
		},
		methods: {
			guozhong() {
				uni.switchTab({
					url: "../../home/index"
				})
			},
			start() {
				var number = than.info.credit / Math.ceil(than.info.highest_credit / 17) - 1
				if (number > 16) {
					than.img = 16
				} else {
					than.img = parseInt(number);
				}
				/* setTimeout(function() {
					than.img = i
					i++;
					if (i < number) {
						than.start();
					}
				}, 200) */
			}
		}
	}
</script>

<style lang="less">
	
	page{
		background: #FAFAFA;
	}
	.top {
		height: 642rpx;
		background-image: url(../static/ctop.png);
		background-size: 100% 100%;

		.guard {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 50rpx;
			.view {
				line-height: 1;
				padding: 0 31rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				height: 64rpx;
				background: #EFEFEF;
				border-radius: 32rpx;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 18rpx;
				}

				text {
					font-size: 36rpx;
					font-family: DIN Medium;
					font-weight: bold;
					color: #F11D07;
					margin: 0 7rpx 0 14rpx;
				}
			}
		}

		.rule {
			display: flex;
			align-items: center;
			padding: 0 36rpx;
			.view {
				margin-left: auto;

				image {
					margin-left: 14rpx;
					width: 28rpx;
					height: 28rpx;
				}

				display: flex;
				align-items: center;
			}
		}

		.plate {
			position: relative;
			width: 307rpx;
			height: 263rpx;
			
            /* #ifdef APP-PLUS */
              margin: 60rpx auto 0;
            /* #endif */
            /* #ifdef H5 */
               margin: 110rpx auto 0;
            /* #endif */
			.img {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
			}

			.number {
				padding-top: 110rpx;
				text-align: center;
				font-size: 60rpx;
				font-family: DIN Medium;
				font-weight: bold;
				color: #333333;
			}

			.text {
				padding-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.icon {
					width: 50rpx;
					height: 34rpx;
				}

				text {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #4B3C20;
				}
			}
		}
	}

	.content {
		position: relative;
		z-index: 30;
		width: 100%;
		// padding-top: 30rpx;


		.up {
			display: flex;
			align-items: center;
			padding: 0 36rpx;
			margin-bottom: 25rpx;

			.list {
				width: 327rpx;
				height: 155rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				display: flex;
				align-items: center;

				.head {
					margin: 0 20rpx;
					width: 74rpx;
					height: 74rpx;
				}

				.icon {
					margin: 0 20rpx;
					width: 52rpx;
					height: 52rpx;
				}

				.name {

					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.text {
					margin-top: 10rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}

				.text1 {
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					.t1 {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #3270FF;
					}

					.t2 {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #F46813;
					}

					.t3 {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #F46813;
					}
				}
			}
		}

		.down {
			.list {
				margin: 0 36rpx 20rpx;
				display: flex;
				align-items: center;
				height: 144rpx;
				background: #FFFFFF;
				border-radius: 20rpx;

				image {
					margin: 0 23rpx;
					width: 68rpx;
					height: 69rpx;
				}

				.con {
					.name {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}

					.text {
						margin-top: 20rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #F46813;

						text {

							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
						}
					}
				}

				.icon {
					margin-left: auto;
					width: 88rpx;
					height: 88rpx;
				}
			}
		}

		.title {
			height: 81rpx;
			display: flex;
			align-items: center;
			padding: 0 40rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}

	.popup_box {
		padding: 35rpx;
		width: 530rpx;

		.title {
			font-size: 38rpx;
			font-weight: bold;
			color: #333333;
			text-align: center;
			margin-bottom: 40rpx;
		}

		.title1 {
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;

			// margin-top: 40rpx;
			.title_line {
				width: 110rpx;
				height: 10rpx;
				border-radius: 10rpx;
				margin-top: 10rpx;
				background: #FFC044;
			}
		}

		.popup_con {
			margin-top: 40rpx;

			.list1 {
				display: flex;
				padding-bottom: 20rpx;

				.color1 {
					color: #FFC31E;
				}

				.color2 {
					color: #333333;
				}

				.item1 {
					flex: 1;
					font-size: 28rpx;
					font-weight: 500;
					color: #666666;
				}

				.item2 {
					font-size: 40rpx;
					font-weight: bold;
					font-style: italic;
					font-family: myFirstFont;
				}
			}


		}

		.botton {
			width: 314rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #333333;
			border-radius: 40rpx;
			color: white;
			margin: 50rpx auto 40rpx auto;
			font-size: 32rpx;
			text-align: center;
			font-weight: bold;
		}

	}
</style>
